<template>
  <div class="footer">
    <el-drawer
        size="16%"
        :modal="false"
        :with-header="false"
        :visible.sync="drawer"
        @opened="sendTitleId"
        class="el-card__body"
    >
      <div class="title">
        <span>Q{{this.id+1}}.</span>
        <span>题目设置</span>
      </div>
      <div class="content">
        <div class="item">
          <span>整题设置</span>
        </div>
        <div class="item">
          <span>
            <el-switch
                v-model="value1"
                :active-value= true
                :inactive-value= false
                @change='changeStatus'
                active-text="此题必答">
            </el-switch>
          </span>
        </div>

        <div class="item">
          <el-collapse accordion>
            <el-collapse-item>
              <template slot="title">
                <el-switch
                    v-model="value2"
                    active-text="答案与分值">
                </el-switch>
              </template>

              <div class="score">
                <div>计分方式</div>
                <el-select v-model="value">
                  <el-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </div>

              <div class="score">
                <div>答案</div>
                <el-select v-model="index" @change="selectFn" v-if="list.questiontype === 1">
                  <el-option v-for="(item,index) in list.rad" :key="index" :label="item.label" :value="index"></el-option>
                </el-select>

                <el-checkbox-group v-model="check" v-if="list.questiontype === 2">
                  <el-checkbox v-for="(check,ind) in list.mul" :label="ind" :key="ind" @change="checkFn" style="display: block">{{check.label}}</el-checkbox>
                </el-checkbox-group>

                <el-select v-model="pan" @change="panFn" v-if="list.questiontype === 3">
                  <el-option v-for="(item,index) in list.pan" :key="index" :label="item.label" :value="index"></el-option>
                </el-select>

                <div v-if="list.questiontype === 4" class="content">
                  <el-input type="textarea" placeholder="可输入答案解析" v-model="ask" @change="askFn"></el-input>
                </div>

                <div v-if="list.questiontype === 5 || list.questiontype === 6" class="content">
                  <el-input type="textarea" placeholder="可输入答案解析" v-model="gap" @change="gapFn"></el-input>
                </div>

              </div>

              <div class="score ite">
                <div class="left">此题分值</div>
                <el-input v-model="input" class="center" @change="setScore"></el-input>
                <div class="right">分</div>
              </div>

<!--              <el-button @click="test">test</el-button>-->

            </el-collapse-item>
          </el-collapse>
        </div>


      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "CreateExamFooter",
  data(){
    return {
      id:'',
      drawer:false,
      value1:false,
      value2:false,

      value: [],
      options: [{
        value: 'one',
        label: '此题有唯一答案和分值'
      },{
        value: 'two',
        label: '每个选项都有对应分值',
      },{
        value: 'three',
        label: '人工评分',
      }],

      list: [],
      totList: [],

      index: [],
      check:[],
      pan: [],
      ask: '',
      gap: '',

      totalScore: 0,
      input: '',
    }
  },
  computed: {
    getDrawer(){
      return this.$store.state.drawer;
    },
    getList(){
      return this.$store.state.list;
    },
    getId(){
      return this.$store.state.questionId;
    },
    getTotList(){
      return this.$store.state.totList;
    }
  },
  watch: {
    getDrawer(){
      this.drawer = true;
    },
    getList(){
      this.list = this.$store.state.list.list;
    },
    getId(){
      this.id = this.$store.state.questionId.questionId;
    },
    getTotList(){
      this.totList = this.$store.state.totList.totList;
    },
  },
  methods: {
    sendTitleId(){
      this.$store.commit('getTitleId',{
        titleId: this.id
      })
      this.input = this.list.score;
      this.value1 = this.list.require;
      this.index = '';

      this.check = [];

    },


    changeStatus(callback){
      // console.log(callback);
      this.$emit('editShow',callback);
    },

    selectFn() {
      for (let i in this.list.rad){
        this.list.rad[i].correct = 'false'
      }
      this.list.rad[this.index].correct = 'True'

    },

    checkFn(val){
      if (val){
        for (let i in this.check){
          this.list.mul[this.check[i]].correct = 'True';
        }
      }
      else{
        for (let i in this.list.mul){
          this.list.mul[i].correct = 'false';
        }
        for (let i in this.check){
          this.list.mul[this.check[i]].correct = 'True';
        }
      }
    },

    panFn(){
      for (let i in this.list.pan){
        this.list.pan[i].correct = 'false'
      }
      this.list.pan[this.pan].correct = 'True'
    },

    askFn(){
      this.list.correct = 'false'
      this.list.correct = this.ask
    },

    gapFn(){
      this.list.correct = 'false'
      this.list.correct = this.gap
    },

    setScore(){
      this.list.score = this.input;
      this.totalScore = 0;
      for (let i in this.totList){
        this.totalScore += parseInt(this.totList[i].score)
      }
      this.$store.commit('getTotalScore',{
        totalScore: this.totalScore
      })
    },

    // test(){
    //   console.log(this.check);
    // }

  }
}
</script>

<style scoped>
.footer>>>.el-card__body {
  margin: 60px 0 0 40px;
  height: 1000px;
}
.title {
  width: 110px;
  height: 30px;
  background-color: #B3C0D1;
  margin-top: 20px;
  margin-left: 15px;
  padding: 5px 5px;
}
.title span {
  color: white;
  margin-left: 2px;
  margin-right: 2px;
}
.content {
  margin: 40px auto;
  width: 210px;
  height: 500px;
}
.content .item {
  height: 40px;
  width: 200px;
  border-bottom: 1px solid #B3C0D1;
}
.content .item span {
  display: block;
  margin-top: 10px;
  font-size: 15px;
}


.score {
  position: relative;
  border-bottom: 1px solid #B3C0D1;
  margin-bottom: 5px;
  padding: 10px 0;
  font-size: 14px;
}
.ite {
  height: 40px;
}
.score .left {
  position: absolute;
  left: 3px;
}
.ite>>>.el-input__inner {
  width: 60px;
  height: 30px;
}
.score .center {
  position: absolute;
  left: 110px;
}
.score .right {
  position: absolute;
  right: 5px;
}
.score .content {
  width: 190px;
  height: 100px;
  margin: 0;
  color: #707070;
}
.score>>>.el-textarea__inner {
  height: 100px;
}


</style>
